<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="queryParams.nickname" placeholder="昵称" clearable />
			</el-form-item>
			<!-- <el-form-item label="跟进类型" prop="type">
				<el-select v-model="queryParams.type" placeholder="请选择跟进类型" clearable>
					<el-option v-for="dict in LeiXingArr" :key="dict.id" :label="dict.name" :value="dict.name" />
				</el-select>
			</el-form-item>
			<el-form-item label="跟进人" prop="employeeName" v-hasPermi="['system:documentary:genjin']">
				<el-select v-model="queryParams.employeeName" placeholder="请选择跟进人">
					<el-option v-for="user in employeeList" :key="user.userId" :label="user.userName"
						:value="user.userName"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="跟进时间">
				<el-date-picker v-model="queryParams.aa" type="daterange" range-separator="-" start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<!-- <el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['system:documentary:add']">新增</el-button>
			</el-col> -->
			<!-- <el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['system:documentary:edit']">修改</el-button>
			</el-col> -->

			<!-- <el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['system:documentary:remove']">删除</el-button>
			</el-col> -->
			<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
		</el-row>

		<el-table v-loading="loading" :data="userList">
			<el-table-column show-overflow-tooltip label="昵称" align="center" prop="nickname">
			</el-table-column>
			<el-table-column label="头像" align="center" prop="createTime">
				<template slot-scope="scope">
					<el-image style="width: 40px; height: 40px" :src="scope.row.headimgurl"
						:preview-src-list="scope.row.imgs">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="手机号" align="center" prop="phone" />
			<el-table-column label="当前套餐" align="center" prop="phone" >
				<template slot-scope="scope">
					<div class="" v-for="it in scope.row.productList">
						{{it.productName}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="套餐开通时间" align="center" prop="phone">
				<template slot-scope="scope">
					<div class="" v-for="it in scope.row.productList">
						{{it.creationTime}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="creationTime" />
			<el-table-column width="300" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="success" style="padding: 10px 10px;"
						@click="userOrderBtn(scope.row)">订单</el-button>
					<el-button size="mini" type="primary" style="padding: 10px 10px;"
						@click="tkBtn(scope.row)">开通套餐</el-button>
					<el-button size="mini" type="danger" style="padding: 10px 10px;"
							@click="gbBtn(scope.row)">关闭套餐</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<el-dialog title="用户订单信息" :visible.sync="DetailVisible" width="70%" :close-on-click-modal="false">
			<el-table v-loading="loading" :data="orderList">
				<el-table-column show-overflow-tooltip label="昵称" align="center" prop="nickName">
				</el-table-column>
				<el-table-column label="产品名称" align="center" prop="productName" />
				<el-table-column label="订单金额" align="center" prop="totalFee" />
				<el-table-column label="支付状态" align="center" prop="payStatus" />
				<el-table-column label="退款状态" align="center" prop="refundStatus" />
				<el-table-column label="支付时间" align="center" prop="payTime" />
			</el-table>
		</el-dialog>
		<el-dialog title="开通套餐" :visible.sync="tcopen" width="600px" append-to-body @close="tccancel">
			<el-form ref="tcform" :model="tcform" :rules="tcrules" label-width="80px">
				<el-form-item label="用户昵称" prop="nickname">
					<el-input disabled style="width: 15rem;" v-model="tcform.nickname" placeholder="用户昵称" />
				</el-form-item>
				<el-form-item label="套餐名称" prop="productId">
					<el-select style="width: 15rem;" v-model="tcform.productId" placeholder="请选择">
						<el-option v-for="user in employeeList" :key="user.productId" :label="user.productName"
							:value="user.productId"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="tcsubmitForm">确 定</el-button>
				<el-button @click="tccancel">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog title="用户套餐" :visible.sync="tcDetailVisible" width="50%" :close-on-click-modal="false">
			<el-table v-loading="loading" :data="userTcList">
				<!-- <el-table-column show-overflow-tooltip label="昵称" align="center" prop="nickName">
				</el-table-column> -->
				<el-table-column label="套餐名称" align="center" prop="productName" />
				<!-- <el-table-column label="订单金额" align="center" prop="totalFee" />
				<el-table-column label="支付状态" align="center" prop="payStatus" />
				<el-table-column label="退款状态" align="center" prop="refundStatus" />
				<el-table-column label="支付时间" align="center" prop="payTime" /> -->
				<el-table-column width="300" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" style="padding: 10px 10px;"
								@click="gbmyBtn(scope.row)">关闭</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listUserApi,
		userorderListApi,
		tcListApi,
		yhKtc,
		cktcApi,
		gbtcApi
	} from "@/api/all/userApi";
	export default {
		name: "Documentary",
		data() {
			return {
				tcopen: false,
				tcDetailVisible:false,
				tcform: {
					productId: null,
					nickname: null,
					openid: null
				},
				tcrules: {
					productId: [{
						required: true,
						message: "请选择需要开通的套餐",
						trigger: "blur"
					}],
				},
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					nickname: ''
				},
				dialogVisible: false,
				userList: [], //存取后端获取客户列表
				DetailVisible: false,
				genJinDetail: {},
				orderList: [],
				employeeList: [],
				userTcList:[]
			};
		},
		created() {
			this.getList();
			this.gettcList()
			console.log(this.$store.state.user.nickName, 'nickName');
		},
		methods: {
			// 关闭套餐
			gbBtn(row){
				console.log(row,'row');
				let oo = {
					openid:row.openid
				}
				cktcApi(oo).then(res=>{
					console.log(res,'关闭套餐');
					this.userTcList = res.data
					this.tcDetailVisible = true
				})
				
			},
			//弹层关闭
			gbmyBtn(row){
				console.log(row,'row');
				this.$modal.confirm('是否确认关闭？').then(() =>{
					let data = {
						id:row.id
					}
					gbtcApi(data).then(res=>{
						this.$modal.msgSuccess("操作成功");
						let oo = {
							openid:row.openid
						}
						cktcApi(oo).then(res=>{
							console.log(res,'关闭套餐');
							this.userTcList = res.data
						})
					});
				}).catch(() => {});
			},
			/** 套餐 */
			gettcList() {
				let aobj = {
					pageNum: 1,
					pageSize: 10,
				}
				tcListApi(aobj).then(response => {
					console.log(response, 'response');
					this.employeeList = response.rows;
				});
			},
			// 弹层取消
			tccancel() {
				this.tcopen = false
				this.$refs.tcform.resetFields();
				this.tcform = {
					productId: null,
					nickname: null,
					openid: null
				}
			},
			// 弹层确定
			tcsubmitForm() {
				console.log(this.tcform, 'form');
				this.$refs["tcform"].validate(valid => {
					if (valid) {
						yhKtc(this.tcform).then(res => {
							console.log(res, 'res退款');
							this.$modal.msgSuccess(res.msg);
							this.tcopen = false
							this.getList();
						})
					}
				});
			},
			// 套餐开通
			tkBtn(row) {
				console.log(row, 'row');
				this.tcform.openid = row.openid
				this.tcform.nickname = row.nickname
				this.tcopen = true
			},
			// 订单
			userOrderBtn(row) {
				console.log(row, 'row');
				userorderListApi(row.openid).then(res => {
					console.log(res, '用户订单列表');
					this.orderList = res.data
					this.DetailVisible = true
				})

			},
			// 详情
			handleDetail(e) {
				console.log(e);
				this.genJinDetail = e
				this.DetailVisible = true
			},

			/** 查询跟单详情列表 */
			getList() {
				this.loading = true;
				listUserApi(this.queryParams).then(response => {
					console.log(response, 'response');
					response.rows.forEach(it => {
						it.imgs = []
						it.imgs.push(it.headimgurl)
					})
					this.userList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						nickname: ''
					},
					this.handleQuery();
			},
		}
	};
</script>
<style>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}
</style>